<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流量检测</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-image: url('static/background.png'); /* 替换为你的背景图片路径 */
            background-size: cover;
            background-position: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
         }
         header {
             width: 100%;
             background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */
             padding: 10px 0;
             text-align: center;
             position: fixed;
             top: 0;
             left: 0;
             z-index: 1000;
         }
         nav ul {
             list-style-type: none;
             padding: 0;
             display: flex;
             justify-content: center;
         }
         nav ul li {
             margin: 0 15px;
         }
         nav ul li a {
             text-decoration: none;
             color: black;
             font-weight: bold;
         }
         nav ul li a:hover {
             color: rgb(85, 153, 222);
         }
         main {
             max-width: 800px;
             margin: 70px 20px; /* 调整上边距以避免被导航栏遮挡 */
             /*text-align: center;*/
             background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */
             padding: 20px;
             border-radius: 10px;
             overflow-y: auto; /* 允许内容区域滚动 */
         }
         main h1 {
             font-size: 2em;
             text-align: center;
         }
         main p {
             line-height: 1.6;
         }
         footer {
             width: 100%;
             background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */
             padding: 10px 0;
             text-align: center;
             position: fixed;
             bottom: 0;
             left: 0;
             z-index: 1000;
         }
         .chart-container {
             margin-top: 20px;
             width: 100%;
             max-width: 500px; /* 设置饼图的最大宽度 */
             height: 300px;
             background-color: #fff;
             border-radius: 10px;
             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
             display: flex;
             justify-content: center; /* 使饼图居中显示 */
             align-items: center; /* 垂直居中显示 */
             margin-left: auto; /* 水平居中 */
             margin-right: auto; /* 水平居中 */
         }
    </style>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="/index">首页</a></li>
                <li><a href="/introduction">系统介绍</a></li>
                <li><a href="/perturbation">参数设置</a></li>
                <li><a href="/generate">流量生成</a></li>
                <li><a href="/detect">检测测试</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>流量检测</h1>
        <p>当前扰动强度 (ξ): {{ perturbation_strength }}</p>
        <p>对抗损失权重 (α): {{alpha}}</p>
        <p>生成器学习率 (β): {{beta}}</p>
        <p>判别器学习率 (ζ): {{zeta}}</p>
        <p>动量因子 (μ): {{mu}}</p>
        <p>集成模型学习率 (ε): {{epsilon}}</p>
        <h2>检测系统技术介绍</h2>
        <p>本检测系统采用了先进的深度学习技术，结合了卷积神经网络（CNN）和长短期记忆网络（LSTM），以实现对网络流量的高效检测。</p>
        <p><strong>CNN+LSTM模型</strong>：模型利用CNN提取流量数据的空间特征，再通过LSTM分析这些特征的时间序列信息，最终通过全连接层对流量进行分类。</p>
        <p><strong>检测流程</strong>：数据预处理 -> 特征提取（CNN）-> 时间序列分析（LSTM）-> 流量分类（FC层）。</p>
        <h2>逃逸率</h2>
        <p>平均逃逸率：{{ escape_rate|float|round(2) }}%</p>
        <div class="chart-container">
            <canvas id="escapeRateChart"></canvas>
        </div>
        <h2>检测效率</h2>
        <p>检测时间：{{ detection_time|float|round(2) }} 秒</p>
    </main>
    <footer>
        <p>&copy; 2025 恶意流量生成系统</p>
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const ctx = document.getElementById('escapeRateChart').getContext('2d');
        const escapeRateChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                 labels: ['被检测到', '未被检测到'],
                 datasets: [{
                     data: [{{100-escape_rate}}, {{escape_rate}}],
                     backgroundColor: [
                         'rgba(255, 99, 132, 0.2)',
                         'rgba(54, 162, 235, 0.2)'
                     ],
                     borderColor: [
                         'rgba(255, 99, 132, 1)',
                         'rgba(54, 162, 235, 1)'
                     ],
                     borderWidth: 1
                 }]
             },
             options: {
                 responsive: true,
                 maintainAspectRatio: false,
                 legend: {
                     position: 'top',
                 },
                 title: {
                     display: true,
                     text: '逃逸率分布'
                 },
                 animation: {
                     duration: 2000,
                     easing: 'easeOutBounce'
                 }
             }
         });
    </script>
</body>
</html>
